import React from 'react'
import ReactDOM from 'react-dom'
import {HashRouter as Router, Route, Link, Switch} from 'react-router-dom'

const App = () => {
    return (
        <Router>
        <div>
            <h1>APP</h1>
            <ul>
                <li><Link to="/a">A</Link></li>
                <li><Link to="/b">B</Link></li>
            </ul>
            <hr/>
            {/* Switch:当匹配多个相同路径时，只使用第一个 */}
            {/* <Switch> */}
                <PageA/>
                <PageB/>
            {/* </Switch> */}
        </div>
        </Router>
    )
}

// hello是个高阶函数
const hello = ({component: Component, ...rest}) => {
    return () => {// 必须返回一个组件而不是一个jsx代码
        return (
            <Route {...rest} component={Component}></Route>
        )
    }
}

const A = () => (
    <h1>PageA</h1>
)

const B= () => (
    <h1>PageB</h1>
)

const PageA = hello ({component: A, path: '/a'})
const PageB = hello ({component: B, path: '/b'})

ReactDOM.render(<App/>, document.getElementById('root'))